<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<style type="text/css">
			.wen {
				width: 100%;
				height: 655px;
				margin: 0 auto;
				position: relative;
				background: skyblue;
			}
			
			#mouseXY {
				width: 100px;
				height: 100px;
				position: absolute;
				right: 0;
				bottom: 0;
				border: 1px solid;
				transition: all 2s;
			}
			
			img {
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div class="wen">
			<div id="mouseXY"><img src="src/img/Friction/shouzhi.png" /></div>
		</div>

		<script src="src/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("body").on("mouseover", function(e) {
				$("#mouseXY").css({
					'top': e.clientY,
					'left': e.clientX,
					'position': 'absolute',
				});
			})
		</script>
	</body>

</html>